{extend name="common/base" /}

{block name="style"}
<link rel="stylesheet" href="__CDN__/html/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="__CDN__/html/css/mui.picker.min.css" />
<style>
    body{
        background: #fff;
    }
</style>
{/block}
{block name="body"}
<div class="grxx-mains">
    <ul class="grxx-nav">
        <li class="li1">
            <div class="grxx-li">头像</div>
            <div class="grxx-you">
                <img src="{$user_info.avatar}" class="grxx-img">
                <input type="file" name="avatar" class="grxx-inp js-avatar">
            </div>
        </li>
        <a href="{:url('setNickname')}">
            <li>
                <div class="grxx-lis">昵称</div>
                {notempty name="$user_info['nick_name']"}
                <div class="grxx-lis2">{$user_info.nick_name}</div>
                {else /}
                <div class="grxx-lis2 grxx-lis2s">待完善</div>
                {/notempty}
            </li>
        </a>
        <a href="{:url('setPhoneOne')}">
            <li>
                <div class="grxx-lis">手机号</div>
                {notempty name="$user_info['phone']"}
                <div class="grxx-lis2">{$user_info.hide_phone}</div>
                {else /}
                <div class="grxx-lis2 grxx-lis2s">待完善</div>
                {/notempty}
            </li>
        </a>
        <li class="sel-bir" data-options='{"type":"date","beginYear":1910,"endYear":2030}'>
            <div class="grxx-lis">生日</div>
            {notempty name="$user_info['birthday']"}
            <div class="grxx-lis2 js-bir" readonly="readonly" id="js-bir">{$user_info.birthday}</div>
            {else /}
            <div class="grxx-lis2 grxx-lis2s">待完善</div>
            {/notempty}
        </li>          
    </ul>
</div>
<div id="time-container" style=''></div>

{/block}
{block name="script"}
<script src="__CDN__/html/js/mui.min.js" type="text/javascript"></script>
<script src="__CDN__/html/js/mui.picker.min.js"></script>
<script>
    (function ($, doc) {
        $.init();
        var result = $('.js-bir')[0];
        var btns = $('.sel-bir');
        btns.each(function (i, btn) {
            btn.addEventListener('tap', function () {
                var _self = this;
                if (_self.picker) {
                    _self.picker.show(function (rs) {
                        $.post("{:url('setBir')}", {bir: rs.text}, function (res) {
                            location.reload();
                        }, 'json');
//                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    //var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function (rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */

                        $.post("{:url('setBir')}", {bir: rs.text}, function (res) {
                            location.reload();
                        }, 'json');

//                        doc.getElementById('js-bir').value = rs.text;
//                        result.innerText = '选择结果: ' + rs.text;
                        /* 
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
//                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }

            }, false);
        });
    })(mui);

    $(".js-avatar").change(function () {
        readURL(this, 'js-avatar', 'js-avatar');
    });
    function readURL(input, name, img) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.' + name).attr('src', e.target.result);

            };
            reader.readAsDataURL(input.files[0]);

            var formData = new FormData();
            var img_file = input;

            var fileobj = img_file.files[0];
            formData.append("file", fileobj);
            formData.append("uptype", 'oss');

            $.showLoading('正在上传');

            $.ajax({
                url: "{:url('ajax/upload')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    if (data.code == 1) {
//                        $('.' + name).show();
                        $('.grxx-img').attr('src', '__OSSCDN__' + data.data.url);
                        $.post("{:url('setAvatar')}", {avatar: data.data.url}, function (res) {
                            $.hideLoading();
                            $.toast(res.msg);
                        }, 'json');
//                        $('.' + img).val(data.data.site_url);
                    } else {
                        $.toast(data.msg, "cancel");
                    }

//                    $.post("{:url('My/setuserinfo')}", {avatar: data.data.url}, function (res) {
//                        if (res.code == '0') {
//                            mui.toast(res.msg);
//                        }
//                    }, 'json');
                },
//                error: function () {
//                    alert("上传失败！");
//                }
            });


        }
    }
</script>
{/block}